<template>
    <div>
        <van-nav-bar
                title="入库详情"
                left-arrow
                @click-left="onClickLeft"
                :z-index="nav_z_index"
        />

        <van-cell-group>
            <van-cell
                    v-for="item in list"
                    :key="item.key"
                    :title="item.name"
                    :value="item.value"
            >
            </van-cell>

            <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">确认信息</van-divider>


            <van-cell title="储存仓库" @click="showPopup" :value="columns[picker_index]" is-link/>
            <van-popup v-model="show"
                       position="bottom"
                       :style="{ height: '38%' }"
            >
                <van-picker :columns="columns" @change="onChange"/>
            </van-popup>

            <van-field
                    v-model="oitm_weight"
                    type="number"
                    label="实到数量(吨)"
                    placeholder="请输入实到数量"
                    clearable
                    right-icon="question-o"
                    @click-right-icon="$toast('输入实到数量')"
            />

            <van-cell
                    class="cy"
                    title="差异值(吨)"
                    :value="difference_quantity"
            >
            </van-cell>
        </van-cell-group>


        <van-submit-bar
                :disabled="!oitm_weight"
                button-text="确认入库"
                @submit="onSubmit"
        />
    </div>
</template>

<script>
    import {NavBar, Cell, CellGroup, Popup, Picker, Search, List, Field, Divider, SubmitBar, Toast} from 'vant';

    export default {
        props: ['id','newsletterPopup'],
        components: {
            [NavBar.name]: NavBar,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [Popup.name]: Popup,
            [Picker.name]: Picker,
            [Search.name]: Search,
            [List.name]: List,
            [Field.name]: Field,
            [Divider.name]: Divider,
            [SubmitBar.name]: SubmitBar,
        },

        data() {
            return {
                list: [
                    {key: 'xxxx1', value: 'xxxxx1', name: '开票单号'},
                    {key: 'xxxx2', value: '2019-12-23 12:12:11', name: '单据日期'},
                    {key: 'xxxx3', value: 'xxxxx3', name: '物料编号'},
                    {key: 'xxxx4', value: 'xxxxx4', name: '物料名称'},
                    {key: 'xxxx6', value: '昌吉xx仓库', name: '来源仓库'},
                    {key: 'xxxx5', value: '50', name: '数量(吨)'},
                ],
                show: false,
                nav_z_index: 900,
                columns: ['仓库A', '仓库B', '仓库C', '仓库D', '仓库E'],
                picker_index: 0,
                oitm_weight: 0,
            };
        },

        beforeCreate: function () {
            console.log('beforeCreate1')
        },
        created: function () {
            console.log('created1')
        },
        beforeMount: function () {
            console.log('beforeMount1')
        },
        mounted: function () {
            console.log('mounted1')
        },
        beforeUpdate: function () {
            console.log('beforeUpdate1')
        },
        updated: function () {
            console.log('updated1')
        },
        activated: function () {
            console.log('zzzzzzzzzzzz',this.id);
            console.log('zzzzzzzzzzzz',this.newsletterPopup);
            // let routes = this.$router.options.routes;
            console.log([this.$route.params,this.$route]);
            // console.log(this.$router);
            // console.log('activated1')
        },
        deactivated: function () {
            console.log('deactivated1')
        },
        beforeDestroy: function () {
            console.log('beforeDestroy1')
        },
        destroyed: function () {
            console.log('destroyed1')
        },
        errorCaptured: function () {
            console.log('errorCaptured1')
        },

        computed: {
            difference_quantity() {
                let xxxx5 = 0;
                let list = this.list;
                list.forEach(item => {
                    if (item.key === 'xxxx5') {
                        xxxx5 = item.value
                    }
                });
                let oitm_weight = this.oitm_weight;
                return xxxx5 - oitm_weight;
            },
        },

        methods: {
            onClickLeft() {
                // Toast('返回');
                this.$router.go(-1);
            },
            showPopup() {
                this.show = true;
            },
            onChange(picker, value, index) {
                this.picker_index = index;
                Toast(`当前值：${value}, 当前索引：${index}`);
                this.show = false;
            },
            onSubmit() {
                Toast('点击确认入库');
            },
        }
    };
</script>

<style lang="less">
    .cy {
        color: red;
    }
</style>
